<template>
    <scroll-view class="scroll-view" scroll-y="true" @scrolltolower="scrolltolower">
        <view class="yue">
            <view class="yue-top">
                <view class="yue-left" @click="switchTab(0)">
                    <view class="">已上架</view>
                    <view v-show="upDown == 0" class="border"></view>
                </view>
                <view class="yue-left" @click="switchTab(1)">
                    <view class="">未上架</view>
                    <view v-show="upDown == 1" class="border"></view>
                </view>
            </view>
            <topList @getcode="getcode" :pages="pages" v-if="upDown == 0"></topList>
            <bottomList @getcode="getcode" :pages="pages" v-if="upDown == 1"></bottomList>
        </view>
    </scroll-view>
</template>

<script setup>
import { ref, watch } from 'vue';
import topList from '@/pages/sub/components/topList.vue'; //已上架列表
import bottomList from '@/pages/sub/components/bottomList'; //下架列表
import { onShow } from '@dcloudio/uni-app';
const upDown = ref(0); //0已上架，1未上架
const pages = ref(1); //当前页
onShow(() => {
    upDown.value = 3;
    setTimeout(() => {
        upDown.value = 0;
    }, 100);
});
const scrolltolower = () => {
    console.log('滚动到底部');
    pages.value++;
};
const switchTab = (value) => {
    upDown.value = value;
};
// 子组件传来的数据，如果更换排序把当前页改成1
const getcode = async (it) => {
    pages.value = it;
};
// 监听顶部是否变化如果变化把page改为1
watch(
    upDown,
    (newProps, oldProps) => {
        pages.value = 1;
        console.log(pages.value);
    },
    { immediate: false, deep: false }
);
</script>

<style lang="scss" scoped>
.scroll-view {
    height: 100vh;
}
.yue {
    .yue-top {
        .yue-left {
            justify-content: center;
            align-items: center;
            display: flex;
            flex-direction: column;
            .border {
                width: 40rpx;
                height: 4rpx;
                background: #ff9b29;
                margin-top: 3px;
            }
        }
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100rpx;
        padding: 0 144rpx;
        border-bottom: solid 20rpx #f7f7f7;
    }
}
</style>
